<template>
  <div class="main_div">
     <div class="btn_div">
        <el-button type="success" style="background-color: #42B983;" @click="dialogFormVisible = true">新增商品</el-button>
     </div>

    <!-- 自定义的表格组件 -->
    <Table ref="mytable" :param="table"></Table>

    <!-- 新增商品的弹窗 -->
    <el-dialog title="新增商品" :visible.sync="dialogFormVisible" style="text-align: left;">

      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="商品标题">
          <el-input v-model="form.title"></el-input>
        </el-form-item>

        <el-form-item label="商品价格">
          <el-input v-model="form.price"></el-input>
        </el-form-item>

        <el-form-item label="库存">
          <el-input v-model="form.save"></el-input>
        </el-form-item>

        <el-form-item label="返利比例">
          <el-input v-model="form.bili"></el-input>
        </el-form-item>

        <el-form-item label="商品分类">
          <el-button type="primary" @click="dialogFormVisible2 = true">{{fenlei.fenleiName}}</el-button>
        </el-form-item>

        <!-- 循环规格
         [
          {
            id: 1
            guigeName: "屏幕尺寸",
            vals: [
              {
                id: 13,
                guigeVal: "72寸"
              },
              {
                id: 12,
                guigeVal: "64寸"
              },
              {
                id: 11,
                guigeVal: "32寸"
              }
            ],
            value: 13
          },
          {},
          {}
         ]

         -->
        <el-form-item v-for="g in guigeList" :label="g.guigeName">
          <el-select v-model="g.value" placeholder="请选择">
            <el-option
              v-for="val in g.vals"
              :key="val.id"
              :label="val.guigeVal"
              :value="val.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品图片">
          <!-- 图片上传的控件 -->
          <el-upload
            action="http://localhost/res/img/uploader"
            list-type="picture-card"
            :on-success="uploaderSuccess">
              <i slot="default" class="el-icon-plus"></i>
              <div style="width: 100%; height: 100%;" slot="file" slot-scope="{file}">
                <!-- 缩略图 -->
                <el-image
                  class="el-upload-list__item-thumbnail"
                  style="width: 100%; height: 100%"
                  :src="file.url"
                  fit="cover"></el-image>
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!uploader.disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)">
                    <i class="el-icon-download"></i>
                  </span>
                  <span
                    v-if="!uploader.disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
          </el-upload>

          <!-- 图片明细的弹窗 -->
          <el-dialog :visible.sync="uploader.dialogVisible" append-to-body width="40%">
            <img width="100%" :src="uploader.dialogImageUrl" alt="" style="margin-bottom: 20px;">

            <el-form-item label="图片描述">
              <el-input type="textarea" v-model="image.info"></el-input>
            </el-form-item>

            <el-form-item label="当前封面">
              <el-radio-group v-model="image.type">
                <el-radio :label="0">否</el-radio>
                <el-radio :label="1">是</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-button type="success" @click="setImageSucc">确定</el-button>
          </el-dialog>
        </el-form-item>

        <el-form-item label="商品描述">
          <!-- 富文本编辑器 -->
          <MyEditor ref="myeditor"></MyEditor>
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="insertGoods()">新增商品</el-button>
      </div>
    </el-dialog>

    <!-- 商品分类的弹窗 -->
    <el-dialog title="选择商品分类" :visible.sync="dialogFormVisible2" append-to-body width="40%">
      <!-- 树状结构 -->
      <el-tree
        ref="tree"
        :data="tree.treeData"
        :props="tree.defaultProps"
        @node-click="treeNodeClick"
        node-key="id"
        default-expand-all="true"></el-tree>
    </el-dialog>

  </div>
</template>

<script>
  import Table from './Table'
  import MyEditor from "./MyEditor"

  export default{
    components:{
      Table,
      MyEditor
    },
    data(){
      return {
        guigeList: [],//规格列表
        fenlei: {
          id: 0,
          fenleiName: "选择商品分类"
        },
        //树形控件的相关属性
        tree: {
          treeData: [],
          defaultProps: {
            children: 'children',
            label: 'fenleiName'
          }
        },
        //上传控件的相关属性
        uploader: {
          dialogImageUrl: '',
          dialogVisible: false,
          disabled: false,
          filelist: [] ,//上传的文件列表
          temfile: null,//缩略图的临时file对象
          fmfile: null//当前封面的file对象
        },
        //表单数据
        form: {
          title: "",
          price: "",
          save: "",
          bili: 0.0
        },
        //图片的相关描述
        image: {
          info: "",
          type: 0
        },
        //弹窗口的隐藏属性
        dialogFormVisible: false,
        dialogFormVisible2: false,
        //表格组件的属性
        table: {
          title: [
            {name: "商品编号", col:"id"},
            {name: "商品标题", col:"title"},
            {name: "商品封面", type:"image", col:"image"},
            {name: "商品价格", col:"price"},
            {name: "返利比例", col:"bili"},
            {name: "所属分类", col:"fenlei"},
          ],
          url: "/goods/list",
          page: {
            enable: true, //是否开启表格组件的分页
            pageSize: 5 //每页显示多少条
          },
          btns: [
            {
              btnName: "上架",
              click: (rowData) => {
              }
            },
            {
              btnName: "下架",
              click: (rowData) => {
              }
            }
          ]
        }
      }
    },
    methods: {
      //新增商品
      insertGoods(){
        //获取富文本的内容
        var info = this.$refs.myeditor.html;
        console.log(info);

        //上传的文件列表
        // console.log(this.uploader.filelist);
        //上传列表 [{filename:xxx,info:xxxx,type:xxx},{},{}]
        var files = this.uploader.filelist;
        var fileJson = [];
        for(var i = 0; i < files.length; i++){
           var f = {};
           f.image = files[i].filename;
           f.info = files[i].info;
           f.type = files[i].type ? files[i].type : 0;
           fileJson.push(f);
        }

        //处理规格
        var gJson = [];
        var guiges = this.guigeList; //规格id - 选中规格值id
        for(var i = 0; i < guiges.length; i++){
          var g = {};
          g.guigeId = guiges[i].id;
          g.valId = guiges[i].value;
          gJson.push(g);
        }

        //ajax请求后端进行商品添加
        this.$.ajax({
          url: "/goods/insert",
          type: "POST",
          data: {
            title: this.form.title,
            price: this.form.price,
            save: this.form.save,
            bili: this.form.bili,
            info: info,
            fid: this.fenlei.id,
            images: JSON.stringify(fileJson),
            guiges: JSON.stringify(gJson)
          },
          success: (data) => {
            //弹出框关闭
            this.dialogFormVisible = false;
            //刷新表格
            this.$refs.mytable.request();
          }
        });
      },
      //上传控件的相关方法
      handleRemove(file) {
        console.log(file);
      },
      //缩略图弹窗
      handlePictureCardPreview(file) {
        this.uploader.dialogImageUrl = file.url;
        this.uploader.dialogVisible = true;
        this.uploader.temfile = file;
        this.image.info = file.info;
        this.image.type = file.type;
      },
      handleDownload(file) {
        console.log(file);
      },
      //上传成功的方法
      uploaderSuccess(response, file, fileList){
        //设置当前的上传路径
        file.filename = response.data;
        //更新上传的图片列表
        this.uploader.filelist = fileList;
      },
      //设置图片的属性成功
      setImageSucc(){
        //获得当前需要设置图片对象
        var tfile = this.uploader.temfile;
        var info = this.image.info;
        var type = this.image.type;

        //将图片的描述信息 和 封面状态 设置给对应的图片的file对象
        tfile.info = info;
        tfile.type = type;

        if(type == 1){
          //将当前的file对象设置为封面
          if(this.uploader.fmfile){
            //已经存在封面
            this.uploader.fmfile.type = 0;
          }
          //设置新的封面
          this.uploader.fmfile = tfile;
        }

        //清空状态
        this.uploader.dialogVisible = false;
        this.uploader.temfile = null;
        this.image.info = "";
        this.image.type = 0;
      },
      //查询商品分类的树形结构数据
      queryFenleiList(){
        this.$.ajax({
          url: "/fenlei/list",
          success: (data) => {
            this.tree.treeData = data.data;
          }
        });
      },
      //树节点的点击事件
      treeNodeClick(node){
        //设置当前选中和分类属性
        this.fenlei.id = node.id;
        this.fenlei.fenleiName = node.fenleiName;

        //查询当前分类下的规格列表（规格值数据）
        this.$.ajax({
          url: "/guige/listAndVals",
          data: {
            fid: this.fenlei.id
          },
          success: (data) => {
            this.guigeList = data.data;
          }
        });

        //关闭弹窗
        this.dialogFormVisible2 = false;
      }
    },
    //页面加载完成后触发
    mounted(){
      //加载分类的树状结构
      this.queryFenleiList();
    }
  }
</script>

<style>
  .main_div h1 {
    margin-bottom: 20px;
  }

  .main_div {
    background-color: white;
    height: 100%;
    overflow: scroll;
  }

  .btn_div {
    width: 80%;
    text-align: left;
    margin: 20px;
  }

</style>
